<template>
  <div class="circular-clock">
    <div class="clock-face">
      <div class="hour-hand" :style="{ transform: `rotate(${hoursRotation}deg)` }" />
      <div class="minute-hand" :style="{ transform: `rotate(${minutesRotation}deg)` }" />
      <div class="second-hand" :style="{ transform: `rotate(${secondsRotation}deg)` }" />
      <div class="center-circle" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const updateClock = () => {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  hoursRotation.value = ((hours % 12) + minutes / 60) * 30;
  minutesRotation.value = (minutes + seconds / 60) * 6;
  secondsRotation.value = seconds * 6;
};

const hoursRotation = ref(0);
const minutesRotation = ref(0);
const secondsRotation = ref(0);

let intervalId;

onMounted(() => {
  updateClock();
  intervalId = setInterval(updateClock, 1000);
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<style scoped>
.circular-clock {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.clock-face {
  position: relative;
  width: 200px;
  height: 200px;
  border: 4px solid #1890ff; /* Ant Design 主色调 */
  border-radius: 50%;
}

.hour-hand,
.minute-hand,
.second-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  background-color: #1890ff;
}

.hour-hand {
  width: 6px;
  height: 60px;
  border-radius: 3px;
}

.minute-hand {
  width: 4px;
  height: 80px;
  border-radius: 2px;
}

.second-hand {
  width: 2px;
  height: 90px;
  background-color: #ff4d4f;
}

.center-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-color: #1890ff;
  border-radius: 50%;
}
</style>